<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<html>
    <head>
        <title>登录界面</title>
        <meta http-equiv=Content-Type content="text/html;charset=utf-8">
        <meta cotent="MSHTML 6.00.2600.0" name=GENERATOR>
        <link href="${pageContext.request.contextPath}/css/style.css" type="text/css" rel="stylesheet">
        <link href="${pageContext.request.contextPath}/css/boot-crm.css" type="text/css" rel="stylesheet">
        <script>
            src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"
        </script>
        <script>


        </script>
    </head>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="${pageContext.request.contextPath}/images/rightbg.jpg">
    <canvas id="cas" style="position: absolute;z-index: -2;filter: alpha(opacity:50);opacity: 0.5"></canvas>
    <script>

        var canvas = document.getElementById("cas");

        var ctx = canvas.getContext("2d");




        resize();

        window.onresize = resize;




        function resize() {

            canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

            canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

        }




        var RAF = (function() {

            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {

                window.setTimeout(callback, 1000 / 60);

            };

        })();




        // 鼠标活动时，获取鼠标坐标

        var warea = {x: null, y: null, max: 20000};

        window.onmousemove = function(e) {

            e = e || window.event;




            warea.x = e.clientX;

            warea.y = e.clientY;

        };

        window.onmouseout = function(e) {

            warea.x = null;

            warea.y = null;

        };




        // 添加粒子

        // x，y为粒子坐标，xa, ya为粒子xy轴加速度，max为连线的最大距离

        var dots = [];

        for (var i = 0; i < 300; i++) {

            var x = Math.random() * canvas.width;

            var y = Math.random() * canvas.height;

            var xa = Math.random() * 2 - 1;

            var ya = Math.random() * 2 - 1;




            dots.push({

                x: x,

                y: y,

                xa: xa,

                ya: ya,

                max: 6000

            })

        }




        // 延迟100秒开始执行动画，如果立即执行有时位置计算会出错

        setTimeout(function() {

            animate();

        }, 100);




        // 每一帧循环的逻辑

        function animate() {

            ctx.clearRect(0, 0, canvas.width, canvas.height);




            // 将鼠标坐标添加进去，产生一个用于比对距离的点数组

            var ndots = [warea].concat(dots);




            dots.forEach(function(dot) {




                // 粒子位移

                dot.x += dot.xa;

                dot.y += dot.ya;




                // 遇到边界将加速度反向

                dot.xa *= (dot.x > canvas.width || dot.x < 0) ? -1 : 1;

                dot.ya *= (dot.y > canvas.height || dot.y < 0) ? -1 : 1;




                // 绘制点

                ctx.fillRect(dot.x - 0.5, dot.y - 0.5, 1, 1);




                // 循环比对粒子间的距离

                for (var i = 0; i < ndots.length; i++) {

                    var d2 = ndots[i];




                    if (dot === d2 || d2.x === null || d2.y === null) continue;




                    var xc = dot.x - d2.x;

                    var yc = dot.y - d2.y;




                    // 两个粒子之间的距离

                    var dis = xc * xc + yc * yc;




                    // 距离比

                    var ratio;




                    // 如果两个粒子之间的距离小于粒子对象的max值，则在两个粒子间画线

                    if (dis < d2.max) {




                        // 如果是鼠标，则让粒子向鼠标的位置移动

                        if (d2 === warea && dis > (d2.max / 2)) {

                            dot.x -= xc * 0.03;

                            dot.y -= yc * 0.03;

                        }




                        // 计算距离比

                        ratio = (d2.max - dis) / d2.max;




                        // 画线

                        ctx.beginPath();

                        ctx.lineWidth = ratio / 2;

                        ctx.strokeStyle = 'rgba(0,0,0,' + (ratio + 0.2) + ')';

                        ctx.moveTo(dot.x, dot.y);

                        ctx.lineTo(d2.x, d2.y);

                        ctx.stroke();

                    }

                }




                // 将已经计算过的粒子从数组中删除

                ndots.splice(ndots.indexOf(dot), 1);

            });




            RAF(animate);


        }

    </script>
        <div ALIGN="center">
            <table border="0" width="1140px" cellspacing="0" cellpadding="0" id="table1">
                <tr>
                    <td height="93"></td>
                    <td></td>
                </tr>
                <tr>
                    <td background="${pageContext.request.contextPath}/images/rights.jpg" width="740" height="412">

                    </td>
                    <td class="login_msg" width="400" align="center">
                        <fieldset style="width: auto; margin: 0px auto;">
                            <legend>
                                <font style="font-size: 15px" face="宋体">
                                    欢迎使用BOOT客户管理系统
                                </font>
                            </legend>
                            <font color="red">
                                <span id="message">${msg}</span>
                            </font>
                            <form action="${pageContext.request.contextPath}/login.action" method="post" onsubmit="return check()">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />
                                账&nbsp;号：<input id="usercode" type="text" name="usercode"/>
                                <br /><br />
                                密&nbsp;码：<input type="password" type="password" name="password"/>
                                <br /><br />
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <center><input type="submit" value="登录"/></center>
                            </form>
                        </fieldset>
                    </td>
                </tr>

            </table>
        </div>
    </body>


</html>